<template>
	<view class="itemBox" :class="type == 2 ? '' : ''">
		<div v-if="!isOrder" style="position: relative;">
			<UserByList @userPage="$emit('userPage',item)" :item="item" :type="type"
				@communicates="$emit('communicates',item)" :hidechat="true"></UserByList>

			<view class="topline"></view>

			<view class="bidding_time">
				<text style="line-height: 50rpx;color:#999;font-size: 22rpx;">{{ time("S", item.createtime) }}</text>
			</view>

		</div>


		<view class="toppingByList" v-if="item.is_topping == '2'">
			<u-icon name="arrow-upward"></u-icon>
		</view>

		<slot name="orderStatus"></slot>
		<slot name="list"></slot>

		<template v-if="type == 1">
			<view class="title u-line-2">
				{{ item[$t('item.person_name')] || $t("暂无信息") }}
			</view>
			<view class="lineP">
				<!-- 		<view class="flex icon">
					<img :src="HTTP_IMG_UTL+'agencyIcon1.png'" alt="" />
				</view> -->
				<view>
					<view class="label">{{ $t('经营范围') }}:</view>
					<view class="text u-line-4 value">{{item.category.name || $t("暂无信息") }}</view>
				</view>
			</view>
			<view class="lineP">
				<!-- 				<div class="icon">
					<img :src="HTTP_IMG_UTL+'agencyIcon2.png'" alt="" />
				</div> -->
				<view>
					<view class="flex">
						<view class="label">{{ $t('专业技能') }}:</view>
					</view>
					<view class="text u-line-2 value">{{item[$t('item.skill')] || $t("暂无信息") }}</view>
				</view>
			</view>
			<view class="lineP">
				<!-- 			<view class="flex icon">
					<img :src="HTTP_IMG_UTL+'agencyIcon3.png'" alt="" />
				</view> -->
				<view>
					<view class="label">{{ $t('所在城市') }}:</view>
					<!-- <view class="text u-line-1">{{item.personcitys[$t('item.city.mergename')] || $t("暂无信息") }}</view> -->
					<div class="value">
						<view v-if="lang=='zh'" class="text u-line-1">{{chengshi}}</view>
						<view v-if="lang!='zh'" class="text u-line-1">{{chengshi_ru}}</view>
					</div>
				</view>

			</view>
		</template>
		<template v-if="type == 2">
			<view class="title">
				<view>
					{{ item[$t('item.person_name')] || $t("暂无信息") }}
				</view>
			</view>

			<view class="text price lineP">
				<view class="small">
					<view class="label">{{$t("总价格")}}</view>
					<view style="color:#DE4023;font-size: 24rpx;">
						{{item.price}}{{$t(item.price_unit)}}
					</view>
				</view>
			</view>

			<view class="lineP">
				<!-- 	<view class="flex icon">
					<img :src="HTTP_IMG_UTL+'agencyIcon4.png'" alt="" />
				</view> -->
				<view class="">
					<view class="label">{{ $t('任务要求') }}:</view>
					<view class="text u-line-4 value">{{item[$t('item.skill')] || $t("暂无信息") }}</view>
				</view>
			</view>
			<view class="lineP" style="flex-direction: row;">
				<!-- 	<view class="flex icon">
					<img :src="HTTP_IMG_UTL+'agencyIcon5.png'" alt="" />
				</view> -->
				<view>
					<view class="label">{{ $t('任务时长') }}:</view>
					<view class="text value">{{item.speed || 0 }}</view>
				</view>
			</view>
			<view class="lineP">
				<!-- <view class="flex icon">
					<img :src="HTTP_IMG_UTL+'agencyIcon3.png'" alt="" />
				</view> -->
				<view>
					<view class="label">{{ $t('所在城市') }}:</view>
					<view class="text u-line-1 value">
						<!-- {{(!isOrder ? item.personcitys[$t('item.city.mergename')] : item.person_city[$t('item.city.mergename')] )|| $t("暂无信息") }} -->
						<view v-if="lang=='zh'" class="text u-line-1">{{chengshi}}</view>
						<view v-if="lang!='zh'" class="text u-line-1">{{chengshi_ru}}</view>
					</view>
				</view>
			</view>
			<view class="price">


				<!-- <img :src="HTTP_IMG_UTL+'agencyIcon6.png'" alt="" /> -->
			</view>
		</template>

		<view class="bidding_address">

			<view class="chat_btn" v-if="!hidechat&&im==0" :class="{wfull:type==1}" @click.stop="$emit('communicates',item)">
				{{$t('即时沟通') }}
			</view>

			<view class="bidding_btn" @click.stop="$emit('communicate',item)" v-if="!isOrder&& type == 2">
				<text class="btnStyle blackBtn" :class="{blackBtn:type != 1}">
					{{ $t(jb) }}
				</text>
			</view>
		</view>

		<slot name="btns"></slot>
	</view>
</template>

<script>
	import UserByList from '@/components/UserByList.vue'
	import {
		IMAGE_URL,
		HTTP_IMG_UTL
	} from "@/config/app";
	export default {
		components: {
			UserByList
		},
		props: {
			hidechat: {
				type: Boolean,
				default: false
			},
			item: {
				type: Object,
				default: {},
			},
			type: {
				type: String | Number,
				default: '1',
			},
			isOrder: {
				type: [Boolean, Number],
				default: false,
			},
			im: {
				type: String | Number,
				default: '0',
			},
		},
		mounted() {
			if (this.item.person_city) {
				if (this.item.person_city.mergename != undefined) {
					this.chengshi = this.item.person_city.mergename || '不限'
				} else {
					if (this.item.personcitys) {
						if (this.item.personcitys.mergename != undefined) {
							this.chengshi = this.item.personcitys.mergename || '不限'
						}
					}
				}
			} else {
				if (this.item.personcitys) {
					if (this.item.personcitys.mergename != undefined) {
						this.chengshi = this.item.personcitys.mergename || '不限'
					}
				}
			}

			if (this.item.person_city) {
				if (this.item.person_city.mergename_ru != undefined) {
					this.chengshi_ru = this.item.person_city.mergename_ru || 'Без ограничений'
				} else {
					if (this.item.personcitys) {
						if (this.item.personcitys.mergename_ru != undefined) {
							this.chengshi_ru = this.item.personcitys.mergename_ru || 'Без ограничений'
						}
					}
				}
			} else {
				if (this.item.personcitys) {
					if (this.item.personcitys.mergename_ru != undefined) {
						this.chengshi_ru = this.item.personcitys.mergename_ru || 'Без ограничений'
					}
				}
			}


			if (uni.getStorageSync('off') == false) {
				this.jb = '参与订单'
			} else {
				this.jb = '参与竞标'
			}
		},
		data() {
			return {
				HTTP_IMG_UTL,
				lang: getApp().globalData.lang,
				jb: '参与订单',
				chengshi: '不限',
				chengshi_ru: 'Без ограничений'
			};
		},
		methods: {
			time(type = "MS", date1, str = "year") {
				if (type === "S") date1 = date1 * 1000 //秒
				let year = new Date(date1).getFullYear();
				let month = (new Date(date1).getMonth() + 1) > 9 ? (new Date(date1).getMonth() + 1) : '0' + (new Date(
						date1)
					.getMonth() + 1);
				let date = new Date(date1).getDate() > 9 ? new Date(date1).getDate() : '0' + new Date(date1).getDate();
				let hours = new Date(date1).getHours() > 9 ? new Date(date1).getHours() : '0' + new Date(date1).getHours();
				let minutes = new Date(date1).getMinutes() > 9 ? new Date(date1).getMinutes() : '0' + new Date(date1)
					.getMinutes();
				let seconds = new Date(date1).getSeconds() > 9 ? new Date(date1).getSeconds() : '0' + new Date(date1)
					.getSeconds();
				if (str === "year") {
					// return `${year}` + app.$i18n.t('年') + `${month}` + app.$i18n.t('月') + `${date}` + app.$i18n.t('日') + `${hours}:${minutes}:${seconds}`
					return `${year}.${month}.${date} ${hours}:${minutes}:${seconds}`
				}
				if (str === "date") {
					return `${year + `-` + month + `-` + date}`
				}
				return `${year + str + month + str + date} ${hours}:${minutes}:${seconds}`
			},
		}
	}
</script>

<style lang="scss" scoped>
	.wfull {
		width: 100% !important;
	}

	.chat_btn {
		width: 292rpx;
		height: 50rpx;
		border-radius: 9rpx;
		background: linear-gradient(100deg, #FF8C7B 15%, #FFD1A2 99%);
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		font-size: 22rpx;
		border: 0;
		outline: none;
	}

	.bidding_time {
		color: #999;
		font-size: 22rpx;
		position: absolute;
		bottom: 9rpx;
		left: 140rpx;
	}

	.itemBox {
		// width: 90%;
		margin: 0 auto;
		background: #ddd;
		padding: 10px;
		border-radius: 20rpx;
		background: #fff;
		margin-bottom: 20rpx;
		position: relative;

		.flex {
			display: flex;
		}

		&.yellow {
			background: #fefcf6;
		}

		.topline {
			border-top: 2rpx solid #f5f5f5;
			margin-top: 20rpx;
			margin-bottom: 10rpx;
		}

		.underline {
			border-bottom: 1rpx solid #ddd;
		}

		.bidding_betwn {
			display: flex;
			// justify-content: space-between;
			align-items: flex-end;

			.chat {
				transform: translateY(0rpx);
			}

			.userName {
				height: 50rpx;

				.bidding_user_text {
					display: block;
					padding-left: 0;
				}

				.country_icon {
					padding-left: 0;
				}
			}

			.flex {
				display: flex;
				justify-content: space-between;
				align-items: center;
			}


			.bidding_user {
				display: flex;
				flex-direction: row;
				align-items: center;
				// padding: $my-padding-20;
				margin-right: 10rpx;

				//头像大小
				.bidding_user_image {
					padding-left: $my-padding-10;
					height: 50rpx;
					width: 50rpx
				}

				//用户图标
				.bidding_user_icon {
					padding-left: $my-padding-10;
					height: 35rpx;
					width: 35rpx;
				}
			}
		}

		.price {
			position: relative;
			display: flex;
			justify-content: space-between;

			.text {
				text-align: left;
				width: 200rpx;
				right: 0rpx;
				font-size: 40rpx;
				top: 40%;
				z-index: 2;
				padding: 20rpx;
				box-sizing: border-box;

				.small {
					font-weight: 600;
					font-size: 25rpx;
				}
			}

			img {
				height: 100rpx;
				width: 300rpx;
				transform: translateX(40rpx);
			}
		}

		.icon {
			width: 62rpx;
			height: 62rpx;
			border-radius: 8rpx;
			background: #F5F4F9;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 16rpx;
			flex-shrink: 0;
		}

		.lineP {
			display: flex;
			align-items: flex-start;
			border-top: 1rpx solid #f5f5f5;
			padding: 14rpx 0;

			img {
				width: 35rpx;
				height: 35rpx;
				flex: none;
			}

			.label {
				flex: none;
				font-size: 24rpx;
				color: #3d3d3d;
				position: relative;
				padding-left: 16rpx;
				margin-bottom: 16rpx;

				&::after {
					content: "";
					position: absolute;
					width: 6rpx;
					height: 25rpx;
					display: block;
					top: 5rpx;
					left: 0;
					background: linear-gradient(101deg, #D9F0A3 0%, rgba(201, 239, 49, 0) 100%);

				}
			}

			.value {
				font-size: 22rpx;
				color: #3d3d3d
			}

			.text {
				// flex: 0 0 400rpx;
			}
		}

		.title {
			color: #3d3d3d;
			font-weight: bold;
			font-size: 28rpx;
			font-weight: 600;
			word-break: break-all;
			max-height: 80rpx;
			padding-bottom: 16rpx;
		}

		//地址信息
		.bidding_address {
			padding: 13.6rpx 0;
			margin-top: 10rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			font-size: $my-font-size21;
			font-weight: 400;
			color: #888888;
			line-height: 30rpx;

			.bidding_ares {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: flex-start;

				.bidding_ares1 {
					display: flex;
					justify-content: flex-start;

					image {
						width: 24.42rpx;
						height: 31.4rpx;
					}
				}
			}
		}
	}

	.blackBtn {
		background-image: none;
		background-color: #000;
		color: #fff;
		border-radius: 8rpx;
		min-height: auto;
		max-height: 50rpx;
		font-size: 22rpx;
	}

	.bidding_btn {
		width: 349rpx;
	}
</style>